<template>
  <div>
    <!-- 产品详情页 -->
    <!-- 录播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="darkred">
      <van-swipe-item v-for="item in gallery" :key="item.id">
        <img v-lazy="item.img_url" width="100%" />
      </van-swipe-item>
    </van-swipe>
    <!-- title 录播图下的横条-->
    <Titles />
    <!-- 展示信息 -->
    <div class="info">
      <h2>{{ info.name }}</h2>
      <section>{{ info.goods_brief }}</section>
      <p>{{ info.retail_price | filterPrice}}</p>
    </div>
    <!-- 展示弹出层 -->
    <van-cell is-link @click="showPopupFn" >展示弹出层</van-cell>
    <van-popup :lock-scroll="scroll" v-model="isShow" position="bottom" :style="{ height: '40%'}" closeable >
     <div class="popupSku">
        <div class="top">
        <div class="avatar">
          <img v-lazy="info.list_pic_url" />
        </div>
        <ul>
          <li>
            <span>价格: </span>
            <div class="price">{{info.retail_price | filterPrice}}</div>
          </li>
          <li>
            <span>库存: </span>
            <div class="num">{{info.goods_number}}</div>
          </li>
        </ul>
      </div>
      <div class="down">
        <h3>数量:</h3>
        <!-- 步进器 -->
        <van-stepper v-model="stepNum" @change="numChange" />
      </div>
     </div>
    </van-popup>

    <!-- 产品参数 -->
    <div class="canshu">
      <h2>商品参数</h2>
      <ul>
        <li v-for="(item, index) in attribute" :key="index">
          <span>{{ item.name }}</span>
          <big>{{ item.value }}</big>
        </li>
      </ul>
    </div>

    <!-- 富文本 ImagePreview -->
    <div class="tupian" v-html="desc"></div>
   
    <!-- 常见问题部分 -->
    <div class="issue">
      <div class="line_title">
        <div class="line"></div>
        <div class="txt">常见问题</div>
      </div>
      <ul>
        <li v-for="item in issue" :key="item.id">
          <h3>{{ item.question }}</h3>
          <p>{{ item.answer }}</p>
        </li>
      </ul>

      <div class="line_title">
        <div class="line"></div>
        <div class="txt">相关产品</div>
      </div>
    </div>
    <!-- 相关产品 -->
    <Products :goodsList="goodsList" />

    <!-- sku -->
<van-goods-action :style="{ 'z-index': '3000'}">
  <van-goods-action-icon icon="star-o" text="收藏" />
  <van-goods-action-icon icon="cart-o" text="购物车" :badge="cartNum"  @click="GoToAddCartFn"/>
  <van-goods-action-button type="danger" text="立即购买" />
  <van-goods-action-button type="warning" text="加入购物车" @click="GotoCartFn"/>
</van-goods-action>
  </div>

  <!-- 提示登陆的total -->
  
</template>

<script>
import { detailFn, GetRelatedDataFn,GetCartNumFn,GetAddtoCartFn} from "../request/api";
import Titles from "../components/product/Titles.vue";
import Products from "../components/Products.vue";
export default {
  data() {
    return {
      //popup背景滚动
      scroll:false,
      //显示sku
      isShow: false,
      goodsList: [],
      myid: "",
      //轮播图
      gallery: [],
      //产品信息
      info: {},
      //常见问题
      issue: [],
      //产品参数
      attribute: [],
      //富文本
      desc:"",
      //购物车数量
      cartNum:'',
      //步进器数量
      stepNum:'1',
      //产品id，来自productList的第一个数组..
      productList:[],
      //商品的参数id
      goodsId:''
      
    };
  },
  components: {
    Titles,
    Products,
  },
  methods: {
   
    numChange(e){
     // console.log(e);  拿到步进器点击的数字
     this.stepNum = e

    },
     //点击展示弹出层
     showPopupFn(){
       this.isShow = true;
     },
     //点击加入购物车
    GotoCartFn() {
    //点击先判断有没有弹出层 有做请求登陆  没有弹出弹出层
    if(this.isShow) {
      let mytoken = localStorage.getItem('token')
     if(mytoken) {
      //  展示弹出层
       
       //加入购物车请求按钮
        GetAddtoCartFn({
        goodsId:this.goodsId,
        productId:this.productList[0].id.toString(),
        number:this.stepNum
      }).then( res => {
        // console.log(res);
        //更新购物车的数量
       if(res.errno === 0) {
          this.cartNum = res.data.cartTotal.goodsCount
       }
      })
     }else {
       //如果没有token 就提示用户登陆
        setTimeout(() => {
        this.$router.push('/cart')
       }, 1500);
     }
    }else {
      //没有弹出层 就显示弹出层
       this.isShow =true
     }
     
    },
    //点击购物车图标跳转到购物车页面
      GoToAddCartFn(){
        this.$router.push("/cart")
      }

  },
  created() {
    // console.log(this.$route.params.id);  拿到商品id
    this.goodsId = this.$route.params.id 
    //假数据做数据请求 "1134032"
    detailFn({
      id: this.goodsId,
    }).then((res) => {
      if(res.errno===0) {
        // console.log(res.data);
      let { gallery, info, issue,productList } = res.data;
      //轮播图信息
      this.gallery = gallery;
      //产品参数
      this.attribute = res.data.attribute;
      this.info = info;
      this.productList = productList
      this.issue = issue;
      //富文本 增加样式修改
      this.desc = info.goods_desc.replace(/<img/g,"<img style='width:100%;display:block'" )
      }
      
    });

    //相关产品的数据
    GetRelatedDataFn({
      //写死的id 记得改
      id: this.goodsId,
    }).then((res) => {
      if(res.errno ===0) {
        // console.log(res.data);
      let { goodsList } = res.data;
      this.goodsList = goodsList;
      }
    });

    // 获得购物车的数量
    //必须是登陆状态才能获取数据
    let mytoken = localStorage.getItem("token")
    if(mytoken){
      GetCartNumFn().then( res => {
      // console.log(res.data.cartTotal.goodsCount);
      if(res.errno ===0 ){
        this.cartNum = res.data.cartTotal.goodsCount
      }
    })
    }
  },
  watch: {
    "$route.params.id": {
      handler(val, old) {
        if (val != old) {
          this.$router.go(0);
        }
      },
    },
  },
 
};
</script>
 
<style lang = "less" scoped>
@import "/commonCss.less";

/* 轮播图 */
.my-swipe .van-swipe-item {
  color: @darkred;
  font-size: 20px;
  text-align: center;
}
/* 展示信息 */
.info {
  background: #fff;
  text-align: center;
  line-height: 40px;
  padding: 20px 0;
  border-bottom: 1px solid #ccc;
  h2 {
    font-size: 20px;
  }
  p {
    color: @darkred;
  }
}
/* 产品参数 */
.canshu {
  margin-top: 20px;
  padding: 10px;
  background: #fff;
  h2 {
    font-size: 20px;
    line-height: 40px;
  }

  ul {
    li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 30px;
      background: #efefef;
      border-radius: 6px;
      margin-bottom: 5px;
      span {
        width: 18%;
        text-align: right;
        color: #999;
      }
      big {
        flex: 1;
        width: 90%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        padding-left: 10px;
      }
    }
  }
}

/* 常见问题 */
.issue {
  padding-bottom: 30px;
  margin-top: 10px;
  background: #fff;
  /* 常见问题文字和线 */
  .line_title {
    width: 100%;
    height: 40px;
    position: relative;
    font-size: 18px;
    background: #fff;

    .line {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      width: 45%;
      background-color: rgb(87, 87, 87);
      height: 2px;
    }
    .txt {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      width: 30%;
      height: 40px;
      background-color: #fff;
      text-align: center;
      line-height: 40px;
    }
  }
  /* 文本 */
  ul {
    position: relative;
    li {
      h3 {
        &::before {
          content: "";
          display: block;
          width: 7px;
          height: 7px;
          border-radius: 50%;
          background-color: @darkred;
          position: absolute;
          top: 16px;
          left: 7px;
        }
        padding-left: 20px;
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        position: relative;
        padding-right: 10px;
      }
      p {
        padding-left: 20px;
        padding-right: 10px;
        color: #666;
        line-height: 20px;
      }
    }
  }
}

/* sku 样式 */
.popupSku {
    width: 100%;
    min-height: 35vh;
    background: #fff;
    position: absolute;
    left: 0;
    bottom: 30px;
    padding: 10px;
    box-sizing: border-box;
  .top {
    display: flex;
    height: 100px;
    
    .avatar{
      width: 100px;
      height: 100px;
      img {
        width: 100%;
      }
    }

    ul {
      flex: 1;
       display: flex;justify-content: space-around;  flex-direction: column;
       padding-left: 10px;
      li {
        display: flex;
         padding-left: 10px;
             font-family: "黑体";
    font-size: 14px;
    color: #333;
      }
    }
  }

  .down{
    padding-bottom: 12px;
    h3 {
      font-size: 20px;
      margin: 20px 0; 
      color: #333;
    }
  }
}
 

</style>